<template>
  <div class="container">
    <div class="btnBox">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" @keyup.enter.native="search">
          <a-form-item label="日期选择">
            <a-range-picker
              v-decorator="[ 'time',{ initialValue: [moment().startOf('day').format(),moment().endOf('day')] } ]"
              format="YYYY-MM-DD HH:mm:ss"
              :disabled-date="disabled"
              :ranges="timeRangs"
            >
            </a-range-picker>
          </a-form-item>
          <a-form-item label="系统模块">
            <a-input v-decorator="[ 'systemModule' ]" placeholder="请输入系统模块" />
          </a-form-item>
          <a-form-item label="操作人">
            <a-input v-decorator="[ 'operateUserId' ]" placeholder="请输入操作人ID" />
          </a-form-item>
          <a-form-item label="操作类型">
            <a-select v-decorator="[ 'operateType',{ initialValue: '' }]" placeholder="请选择操作类型" style="width: 120px">
              <a-select-option value="" key=""> 全部</a-select-option>
              <a-select-option :value="key" :key="key" v-for="(value, key, index) in operationTypeList">
                {{ value }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="状态">
            <a-select v-decorator="[ 'operationState',{ initialValue: '' }]" placeholder="请选择状态" style="width: 120px">
              <a-select-option value="" key=""> 全部</a-select-option>
              <a-select-option value="0"> 操作成功</a-select-option>
              <a-select-option value="1"> 操作失败</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" htmlType="submit" @click="search">查询</a-button>
            <a-button htmlType="submit" class="ml15" @click="searchReset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="onSeach"
      bordered
      :rowKey="(record) => record.id"
    >
      <template slot="operationState" slot-scope="text, record">
        <a-tag :color="text ? 'red' : 'green'">
          {{text ? '失败' : '成功'}}
        </a-tag>
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button size="small" type="dashed" @click="detail(record)">日志详情</a-button>
      </template>
    </s-table>

    <!--新增删除-->
    <Detail :visible="visible" :record="this.record"  @cancel="cancel" />
  </div>
</template>

<script>
import STable from '@/components/Table'
import { mapGetters } from 'vuex'
import { getList } from '@/api/log-manage'
import store from '@/store'
import { Ellipsis } from '@/components'
import Detail from './actionDetail.vue'
import moment from 'moment'
import { timeRangs } from '@/utils/util'
import { operationTypeList, sitePlace } from '@/views/mapping'
export default {
  name: 'appConfiguration',
  components: { Ellipsis, STable, Detail },
  computed: {
    timeRangs() {
      return timeRangs
    },
    operationTypeList() {
      return operationTypeList
    },
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      record: {}, // 行数据
      // 查询条件参数
      pageNum: 0,
      pageSize: 10,
      total: 0,
      columns: [
        { title: '日志编码', dataIndex: 'id', align: 'center' },
        { title: '系统模块', dataIndex: 'systemModule', align: 'center' },
        { title: '操作类型', dataIndex: 'operationType', align: 'center' , customRender:(text) => operationTypeList[text]},
        { title: '操作人ID', dataIndex: 'operationUserId', align: 'center' },
        { title: '操作状态', dataIndex: 'operationState', scopedSlots: { customRender: 'operationState' }, align: 'center' },
        { title: '操作时间', dataIndex: 'operationTime', align: 'center' },
        { title: '消耗时间', dataIndex: 'timeConsuming', align: 'center', customRender:(text) => `${text || 0} 毫秒` },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, align: 'center', width: 180 }
      ]
    }
  },
  methods: {
    moment,
    disabled(current) {
      return current && current > moment().subtract().endOf('day')
    },
    // 条件查询列表
    onSeach(parameter) {
      return new Promise((resolve, reject) => {
        const params = {
          ...parameter,
          userId: store.getters.userInfo?.userId,
          ...this.form.getFieldsValue(),
          startTime: moment(this.form.getFieldValue('time')[0]).format('YYYY-MM-DD HH:mm:ss'),
          endTime: moment(this.form.getFieldValue('time')[1]).format('YYYY-MM-DD HH:mm:ss'),
        }
        delete params.time
        getList(params).then(res => {
          resolve(res.data)
        }).catch((err) => {
          console.log(err, 'err')
          // reject(err)
        })
      })
    },
    cancel() {
      this.visible = false
      this.record = {}
    },
    detail(item) {
      this.visible = true
      this.record = item
    },
    refresh(boo) {
      this.$refs.table.refresh(boo)
    },
    search() {
      this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
    },
    searchReset() {
      this.form.resetFields()
      this.$refs.table.refresh(true) // refresh() 不传参默认值 false 不刷新到分页第一页
    }
  }
}
</script>
<style lang="less" scoped>
</style>
